<template>
  <div>
    <van-sticky>
      <van-nav-bar
        title="不凡"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>
   
    <div class="zhong" >

    <!-- <input type="text" v-model="ipt" /> -->
  
    
    
  <van-sticky :offset-top="45">
 <van-search  v-model="ipt" placeholder="搜索" />
</van-sticky>
    
    <div class="nr" v-for="(item,index) in content " :key='index' >
        {{item.title}}地址:{{item.address}}
    </div>

    </div>
    <h2>显示当前位置</h2>
    <div id="allmap"></div>
  </div>
</template>

    <script>
export default {
  data() {
    return {
      ipt: "",
      map: "",
      content:[],
    };
  },
  watch: {
     
    ipt(){
         var that=this;
      var options = {
        onSearchComplete: function (results) {
          // 判断状态是否正确
          if (local.getStatus() == BMAP_STATUS_SUCCESS) {
            console.log(results.Hr);
            that.content=results.Hr    
          }
        },
      };
      var local = new BMap.LocalSearch(this.map, options);
      local.search(this.ipt);
    },
  },
  computed: {},
  created() {},
  mounted() {
    // 百度地图API功能
    var _this = this;
    var map = new BMap.Map("allmap");
    this.map = map;
    var point = new BMap.Point(116.331398, 39.897445);
    map.centerAndZoom(point, 12);

    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(
      function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          var mk = new BMap.Marker(r.point);
          map.addOverlay(mk);
          map.panTo(r.point);
          //   alert("您的位置：" + r.point.lng + "," + r.point.lat);
        } else {
          alert("failed" + this.getStatus());
        }
      },
      { enableHighAccuracy: true }
    );
  },
  methods: {
       onClickLeft() {
      
      this.$router.push({
        name: "Home"
      });
    },
   
  },

};
</script>

    <style scoped lang="scss">
#allmap {
  height: 400px;
}

.nr {
  
  height: 32px;
  font-size: 12px;
  padding: 10px 15px;
 text-align: left;
 color: black;
}
h2{
    
    text-align: left;
    margin-left: 15px;
}
.zhong{
    margin-top: 5px;
    height: 300px;
    overflow: hidden;
    overflow-y: auto;
    input{

    }
}
</style>
